<template>
    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="dialog" destroy-on-close="true"
               title="信息导入" width="550px">
        <el-form v-loading="loading"
                 element-loading-text="后台处理中，请稍后"
                 element-loading-spinner="el-icon-loading"
                 ref="form" :rules="rules" size="small">
            <el-form-item label="下载模板">
                <a :href="'/template/temp.xlsx'" download="考试模板.xlsx" ref="link" style="color:#1890ff;"
                    @click="hrefConsole">信息模板</a>
            </el-form-item>
            <el-form-item label="上传" style="padding-left:30px;">
                <el-upload style="width:400px;" :action="this.baseApi + databaseUploadApi" :data="databaseInfo"
                    :headers="headers" :on-progress="handleExceed" :on-success="handleSuccess" :on-error="handleError" class="upload-demo" drag
                    accept='.xlsx,.xls'>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div slot="tip" class="el-upload__tip" style="margin-left:40px;">
                      请上传EXCEL文件（以.xlsx或.xls结尾的文件）
                    </div>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="cancel">关闭</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'

export default {
    inject: ['reload'],
    props: {
        databaseInfo: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    computed: {
        baseApi() {
            return process.env.VUE_APP_BASE_API
        },
        downLoadApi() {
            return this.$store.getters.downLoadApi
        }
    },
    data() {
        return {
            loading: false,
            dialog: false,
            headers: {
                Authorization: getToken()
            },
            rules: {},
            databaseUploadApi: '/coffee/exam/excel',
            href: this.downLoadApi + '/template/match.xlsx',
        }
    },
    methods: {
        cancel() {
            this.dialog = false;
            this.reload()
        },
        handleExceed(){
            this.loading = true
        },
        handleSuccess(response, file, fileList) {
            if (response.code === 200) {
                this.$message({
                    title: '执行结果',
                    message: response.msg,
                    type: 'success',
                    duration: 2500,
                    showClose: "true",
                })
            } else {
                this.$notify({
                    title: response,
                    type: 'error',
                    duration: 0
                })
            }
            this.loading = false
        },
        handleError(e, file, fileList) {
            const msg = JSON.parse(e.message)
            // console.log(msg)
            this.$notify({
                title: msg.message,
                type: 'error',
                duration: 0
            })
            this.loading = false
        },
        hrefConsole() {
            console.log(this.$refs.link)
        }
    },
    mounted() {
    },
}
</script>

<style scoped></style>
